<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ITSM后台管理系统-详情页</title>
<link rel="stylesheet" href="stylesheets/reset.css">
<link rel="stylesheet" href="stylesheets/subpage.css">
<script src="scripts/our.js"></script>
<script src="scripts/widget-tabpanel.js"></script>
<script src="scripts/widget-dialog.js"></script>
<script src="scripts/subpage.js"></script>
</head>
<body>
<div class="widget-tabpanel subpage_detail">
    <div class="sub_sidebar">
        <h1>ITSM</h1>
        <p>Hi,<span class="username">admin</span>,welcome to ITSM.</p>
        <ul class="tabs">
            <li class="tab active">
                <a href="#">用户管理</a>
            </li>
            <li class="tab">
                <a href="#">用户分组</a>
            </li>
            <li class="tab">
                <a href="#">事件阀值</a>
            </li>
        </ul>
    </div>
    <div class="sub_content panels">
        <div class="panel user_manage">
            <button id="btn_add_user" class="btn_add">添加新用户</button>
            <div class="user_list">
                <h3>用户列表</h3>
                <table class="table_add">
                    <thead>
                        <tr>
                            <th>用户名</th>
                            <th>密码</th>
                            <th>姓名</th>
                            <th>手机</th>
                            <th>工作电话</th>
                            <th>工作分机</th>
                            <th>邮箱</th>
                            <th>QQ</th>
                            <th>微信账号</th>
                            <th>用户分组</th>
                            <th>用户可管理设备</th>
                            <th>工作部门</th>
                            <th>工作工号</th>
                            <th>操作管理员</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
        </div>
        <div class="panel user_group">
            <div class="current_group_list">
                <h3>当前用户分组信息</h3>
                <ul class="ul_group">
                    <li>
                        <span>分组编码：</span>
                        <i></i>
                    </li>
                    <li>
                        <span>分组名称：</span>
                        <i></i>
                    </li>
                    <li>
                        <span>分组所有权限：</span>
                        <i></i>
                    </li>
                    <li>
                        <span>备注：</span>
                        <i></i>
                    </li>
                    <li>
                        <span>操作管理员：</span>
                        <i></i>
                    </li>
                    <li style="border-bottom: none;">
                        <span>更新时间：</span>
                        <i></i>
                    </li>
                </ul>
            </div>
            <div class="all_group_list">
                <button id="btn_add_group" class="btn_add">添加分组</button>
                <div class="all_group_list_detail">
                    <h3>所有用户分组信息</h3>
                    <table class="table_group">
                        <thead>
                            <tr>
                                <th width="22%">分组编码</th>
                                <th width="10%">分组名称</th>
                                <th width="25%">分组所有权限</th>
                                <th width="10%">操作管理员</th>
                                <th width="13%">更新时间</th>
                                <th width="10%">备注</th>
                                <th width="10%">编辑</th>
                            </tr>
                        </thead>
                        <tbody></tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="panel">三</div>
    </div>
</div>
<!--弹窗：添加新用户-->
<div id="dialog_add_user" class="widget-dialog">
    <a href="javascript:void('close');" class="close" hidefocus="">×</a>
    <h2 class="add_user">
        添加新用户
        <span>*为必填项</span>
    </h2>
    <h2 class="edit_user">编辑用户</h2>
    <ul>
        <li>
            <i>*</i>
            <span>用户名：</span>
            <input id="inp_username" type="text">
            <em class="tip">对不起，用户名已存在！</em>
        </li>
        <li>
            <i>*</i>
            <span>密码：</span>
            <input id="inp_pwd" type="password">
        </li>
        <li>
            <i>*</i>
            <span>姓名：</span>
            <input id="inp_name" type="text">
        </li>
        <li>
            <i>*</i>
            <span>手机：</span>
            <input id="inp_mobile" type="text">
        </li>
        <li class="no_important">
            <span>工作电话：</span>
            <input id="inp_workphone" type="text" style="width: 100px;">
        </li>
        <li class="no_important">
            <span>工作分机：</span>
            <input id="inp_fj" type="text" style="width: 100px;">
        </li>
        <li>
            <i>*</i>
            <span>邮箱：</span>
            <input id="inp_email" type="text">
        </li>
        <li class="no_important">
            <span>QQ:</span>
            <input id="inp_qq" type="text">
        </li>
        <li class="no_important">
            <span>微信账号：</span>
            <input id="inp_wx" type="text">
        </li>
        <li>
            <i>*</i>
            <span>用户分组:</span>
            <input id="inp_role" type="text">
        </li>
        <li>
            <i>*</i>
            <span>用户可管理设备:</span>
            <select name="" id="sel_equips">
                <option value="I区">I区</option>
                <option value="All">All</option>
            </select>
        </li>
        <li class="no_important">
            <span>工作部门：</span>
            <input id="inp_workdepar" type="text">
        </li>
        <li class="no_important">
            <span>工作工号：</span>
            <input id="inp_workcode" type="text">
        </li>
        <li class="no_important">
            <span>操作管理员：</span>
            <input id="inp_operater" type="text">
        </li>
    </ul>
    <button id="btn_user_assure">确定</button>
    <button id="btn_user_update">修改</button>
    <button id="btn_cancel">取消</button>
</div>
<!--弹窗：添加新用户分组-->
<div id="dialog_add_group" class="widget-dialog">
    <a href="javascript:void('close');" class="close" hidefocus="">×</a>
    <h2>
        添加新用户分组
        <span>*为必填项</span>
    </h2>
    <ul>
        <li>
            <i>*</i>
            <span>分组名称：</span>
            <input id="inp_rolename" type="text">
        </li>
        <li>
            <i>*</i>
            <span>分组所有权限：</span>
            <select id="sel_juris">
                <option value="I区">I区</option>
                <option value="all">all</option>
            </select>
        </li>
        <li class="no_important">
            <span>备注：</span>
            <input id="inp_descry" type="text">
        </li>
        <li class="no_important">
            <span>操作管理员：</span>
            <input id="inp_group_operator" type="text">
        </li>
    </ul>
    <button id="btn_group_assure">确定</button>
    <button id="btn_group_cancel">取消</button>
</div>
<!--弹窗：是否删除用户分组-->
<div id="dialog_del" class="widget-dialog">
    <a href="javascript:void('close');" class="close" hidefocus="">×</a>
    <p>您确认要删除该条用户分组信息吗？</p>
    <button id="btn_del_assure">确定</button>
    <button id="btn_del_cancel">取消</button>
</div>
</body>
</html>
